<template>
  <div id="pics">
    <a href="javascript:"><div id="ljiantou" @click="left">
      <i class="iconfont">&#xeb22;</i>
    </div></a>
    <div id="con" ref="con">
      <div class="pic" @click="imgClick(0)">
        <img src="../../../src/assets/geziwo.jpg">
        <span>鸽子窝公园</span>
      </div>
      <div class="pic" @click="imgClick(1)">
        <img src="../../../src/assets/biluota.jpg">
        <span>碧螺塔酒吧公园</span>
      </div>
      <div class="pic" @click="imgClick(2)">
        <img src="../../../src/assets/lianfengshan.jpg">
        <span>联峰山公园</span>
      </div>
      <div class="pic" @click="imgClick(3)">
        <img src="../../../src/assets/laohuhsi.jpg">
        <span>老虎石海上公园</span>
      </div>
      <div class="pic" @click="imgClick(4)">
        <img src="../../../src/assets/guailou.jpg">
        <span>怪楼奇园景区</span>
      </div>
      <div class="pic" @click="imgClick(5)">
        <img src="../../../src/assets/yeshegn.jpg">
        <span>秦皇岛野生动物园</span>
      </div>
      <div class="pic" @click="imgClick(6)">
        <img src="../../../src/assets/xinao.jpg">
        <span>新澳海底世界</span>
      </div>
      <div class="pic" @click="imgClick(7)">
        <img src="../../../src/assets/nandaihe.jpg">
        <span>南戴河旅游度假区</span>
      </div>
      <div class="pic" @click="imgClick(8)">
        <img src="../../../src/assets/weilan.jpg">
        <span>远洋蔚蓝海岸</span>
      </div>
      <div class="pic" @click="imgClick(9)">
        <img src="../../../src/assets/qiuxianruhai.jpg">
        <span>秦皇求仙入海处</span>
      </div>
      <div class="pic" @click="imgClick(10)">
        <img src="../../../src/assets/ledao.jpg">
        <span>乐岛海洋王国</span>
      </div>
      <div class="pic" @click="imgClick(11)">
        <img src="../../../src/assets/diyiguan.jpg">
        <span>天下第一关</span>
      </div>
      <div class="pic" @click="imgClick(12)">
        <img src="../../../src/assets/laolongtou.jpg">
        <span>老龙头景区</span>
      </div>
      <div class="pic" @click="imgClick(13)">
        <img src="../../../src/assets/zushan.jpg">
        <span>祖山风景区</span>
      </div>

      <div class="pic" @click="imgClick(14)">
        <img src="../../../src/assets/yansehu.jpg">
        <span>堰塞湖景区</span>
      </div>
      <div class="pic" @click="imgClick(15)">
        <img src="../../../src/assets/jiaoshan.jpg">
        <span>角山长城</span>
      </div>
    </div>
    <a href="javascript:"><div id="rjiantou" @click="right">
      <i class="iconfont">&#xeb21;</i>
    </div></a>
  </div>
</template>

<script>
export default {
  name: 'Pics',
  props: {
    imgShow: Function,
    contentShow: Function,
    getIndex: Function
  },
  data () {
    return {
      page: 0,
      nowLeft: 0
    }
  },
  methods: {
    left () {
      if (this.page > 0) {
        this.$refs.con.style.left = (this.nowLeft + 71.5) + 'rem'
        this.page--
        this.nowLeft = parseFloat(this.$refs.con.style.left)
      } else {
        alert('当前已是第一张')
      }
    },
    right () {
      if (this.page < 3) {
        this.$refs.con.style.left = (this.page + 1) * (-71.5) + 'rem'
        this.page++
        this.nowLeft = parseFloat(this.$refs.con.style.left)
      } else {
        alert('当前已是最后一张')
      }
    },
    imgClick (index) {
      this.imgShow(index)
      this.contentShow(index)
      this.getIndex(index)
    }
  }
}
</script>

<style scoped>
  #pics{
    width: 60%;
    height: 15rem;
    padding: 2rem 0;
    background-color: #cccccc;
    position: absolute;
    overflow: hidden;
  }
  #con{
    width: 229rem;
    height: 100%;
    margin: 0 2rem;
    text-align: center;
    position: absolute;
  }
  .pic{
    width: 12.3rem;
    height: 9rem;
    float: left;
    margin-left: 1rem;
    margin-right: 1rem;
    text-align: center;
    font-size: 14px;
    color: #666666;
    position: relative;
    z-index: 0;
  }
  .pic img{
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  #ljiantou{
    width: 3rem;
    height: 15rem;
    color: #666666;
    position: absolute;
    line-height: 15rem;
    top: 0rem;
    left: -0.5rem;
    background-color: #cccccc;
    z-index: 20;
  }
  #rjiantou{
    width: 3rem;
    height: 15rem;
    color: #666666;
    position: absolute;
    line-height: 15rem;
    top: 0rem;
    right: 0rem;
    background-color: #cccccc;
    z-index: 20;
  }
</style>
